import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface ScatterProps {
    chartId?: string;
    width?: string;
    height?: string;
    symbolSize?: number;
    seriesData?: number[][];
}

@customElement('lit-scatter')
export class LitScatter extends LitElement {
    @property({type: String}) chartId: string = 'lit-scatter-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Number}) symbolSize: number = 20;
    @property({type: Array}) seriesData: number[][] = [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
    ];

    option: echarts.EChartsOption = {
        xAxis: {},
        yAxis: {},
        series: [
            {
                symbolSize: this.symbolSize,
                data: this.seriesData,
                type: 'scatter'
            }
        ]
    };

    static styles = style;

    updated(): void {
        (this.option.series as any)[0].symbolSize = this.symbolSize;
        (this.option.series as any)[0].data = this.seriesData;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-scatter': LitScatter;
    }
}